﻿<UserControl x:Class="Bio.Controls.ColorPicker"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Bio.Controls" mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="400">
    <Grid>
        
        <Grid.Resources>

            <DataTemplate x:Key="ColorSelectBox">
                <Rectangle Margin="3" Stroke="Black" ToolTip="{Binding}"
                               StrokeThickness="1" Width="10" Height="10">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{Binding}" />
                    </Rectangle.Fill>
                </Rectangle>
            </DataTemplate>

            <Style x:Key="ColorListStyle" TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
                <Setter Property="BorderBrush" Value="{x:Null}" />
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <WrapPanel />
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemTemplate" Value="{StaticResource ColorSelectBox}" />
                <EventSetter Event="SelectionChanged" Handler="OnColorListChanged" />
            </Style>
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition Width="25" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        
        <local:ColorSaturationSelector Margin="5" x:Name="css" Grid.Column="1" />
        <local:HueSelector Margin="5" Grid.Column="2" Hue="{Binding ElementName=css, Path=Hue, Mode=TwoWay}" />

        <GroupBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Header="Selected Color">
            <StackPanel Orientation="Horizontal">
                <Rectangle Stroke="Black" StrokeThickness="1" Height="50" Width="50" Margin="5"
                       Fill="{Binding ElementName=css, Path=ColorBrush}">
                    <Rectangle.Effect>
                        <DropShadowEffect />
                    </Rectangle.Effect>
                </Rectangle>
                <Button Margin="5,0" Content="Add To Custom Colors" Click="OnAddToCustomColors"
                        VerticalAlignment="Center" Padding="5" />
            </StackPanel>
        </GroupBox>

        <Grid Grid.Column="0" Margin="5" Grid.RowSpan="2">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>

            <GroupBox Header="Known Colors:">
                <ListBox x:Name="knownColorsLb" Style="{StaticResource ColorListStyle}" />
            </GroupBox>

            <GroupBox Header="Custom Colors:" Grid.Row="1">
                <ListBox x:Name="customColorsLb" Style="{StaticResource ColorListStyle}" />
            </GroupBox>

        </Grid>

    </Grid>
</UserControl>
